<template>
  <div id="login">
    <div class="container" :class="{ active: isSignUp }">
      <!-- 注册 -->
      <div class="form-container sign-up-container">
        <div class="form">
          <h2>注册</h2>
          <input
            type="text"
            v-model="registerData.username"
            placeholder="Username..."
          />
          <input
            type="email"
            v-model="registerData.email"
            placeholder="Email..."
          />
          <input
            type="password"
            v-model="registerData.password"
            placeholder="Password..."
          />
          <button @click="signUp">注册</button>
        </div>
      </div>
      <!-- 登录 -->
      <div class="form-container sign-in-container">
        <div class="form">
          <h2>登录</h2>
          <input
            type="text"
            v-model="loginData.username"
            placeholder="username..."
          />
          <input
            type="password"
            v-model="loginData.password"
            placeholder="Password..."
          />
          <a href="#" class="forget-password">忘记密码</a>
          <button @click="signIn">登录</button>
        </div>
      </div>
      <div class="overlay_container">
        <div class="overlay">
          <div class="overlay_panel overlay_left_container">
            <h2>登录vue3旅游网站</h2>
            
            <button @click="switchToSignIn" id="sign-in">登录</button>
          </div>
          <div class="overlay_panel overlay_right_container">
            <h2>欢迎来到vue3旅游网站</h2>
            <button @click="switchToSignUp" id="sign-up">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default {
  setup() {
    const router = useRouter();
    const isSignUp = ref(false);
    const registerData = ref({
      username: "",
      email: "",
      password: "",
    });
    const loginData = ref({
      username: "",
      password: "",
    });

    const register = (value) => {
      ElMessage({
        message: "注册成功",
        type: "success",
      });
      localStorage.setItem("userInfo", JSON.stringify(value));
      router.push("./login");
    };

    const signUp = () => {
      // 实际注册逻辑应该在这里
      console.log("Sign Up:", registerData.value);
      const value = registerData.value;
      if (localStorage.userInfo) {
        let userInfo = JSON.parse(localStorage.userInfo);
        if (userInfo["username"] === value["username"]) {
          return ElMessage({
            message: "该账号已存在",
            type: "error",
          });
        } else {
          register(value);
        }
      } else {
        register(value);
      }
    };

    const signIn = () => {
      // 实际登录逻辑应该在这里
      console.log("Sign In:", loginData.value);
      const value = loginData.value;
      if (!localStorage.userInfo) {
        return ElMessage({
          message: "账号未注册",
          type: "error",
        });
      } else {
        let userInfo = JSON.parse(localStorage.userInfo);
        if (userInfo["username"] === value["username"]) {
          if (userInfo["password"] === value["password"]) {
            ElMessage({
              message: "登录成功",
              type: "success",
            });
            localStorage.setItem("isLogin", "1");
            router.push("./");
          } else {
            return ElMessage({
              message: "密码错误",
              type: "error",
            });
          }
        } else {
          return ElMessage({
            message: "账号不存在或输入错误",
            type: "error",
          });
        }
      }
    };

    const switchToSignUp = () => {
      isSignUp.value = true;
    };

    const switchToSignIn = () => {
      isSignUp.value = false;
    };

    return {
      isSignUp,
      registerData,
      loginData,
      signUp,
      signIn,
      switchToSignUp,
      switchToSignIn,
    };
  },
};
</script>

<style lang="scss" scoped>
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f6f5f7;
}

h2 {
  margin-bottom: 10px;
  font-size: 32px;
  text-transform: capitalize;
}

.container {
  position: relative;
  width: 768px;
  height: 480px;
  background-color: white;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.form-container {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: white;
  transition: all 0.6s ease-in-out;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

input {
  width: 80%;
  margin: 8px 0;
  padding: 12px;
  background-color: #eee;
  border: none;
  outline: none;
}

.forget-password {
  display: inline-block;
  height: 20px;
  text-decoration: none;
  color: #bbb;
  text-transform: capitalize;
  font-size: 12px;
}

.forget-password:hover {
  color: lightslategray;
  border-bottom: 2px solid #eee;
}

button {
  background: #ff4b2b;
  padding: 10px 50px;
  border: 1px solid transparent;
  border-radius: 20px;
  text-transform: uppercase;
  color: white;
  margin-top: 10px;
  outline: none;
  transition: transform 80;
}

button:active {
  transform: scale(0.95);
}

.overlay_container {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 100;
  right: 0;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
}

.overlay {
  position: absolute;
  width: 200%;
  height: 100%;
  left: -100%;
  background-color: #000;
}

.overlay_panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  color: white;
  text-align: center;
}

.overlay_panel button {
  background-color: transparent;
  border: 1px solid white;
}

.overlay_panel p {
  font-size: 12px;
  margin: 10px 0 15px 0;
}

.overlay_right_container {
  right: 0;
}

.container.active .sign-up-container {
  transform: translateX(100%);
  z-index: 5;
}

.container.active .sign-in-container {
  transform: translateX(100%);
}

.container.active .overlay_container {
  transform: translateX(-100%);
}

.container.active .overlay {
  transform: translateX(50%);
}
</style>
